<template>
	<view>
		<view>
			<view class="un-prefdetail1">
				<text class="clamp un-prefdetail1-text">{{pref.TITLE}}</text>
				<text v-if="this.pref.type===5" class="un-prefdetail1-text1 ">{{pref.DISCOUNT}}</text>
				<text v-if="this.pref.type===5" class="un-prefdetail1-text3">折</text>
				<text v-else class="clamp un-prefdetail1-text1">¥{{pref.VALUES}}</text>
				<text v-if="this.pref.type!==5" class="un-prefdetail1-text2">满{{pref.USELIMITMONEY}}元可用</text>
			</view>
			<view class="un-prefdetail2">
				<view class="">
					<text>· 适用平台 :</text>
					<text>{{pref.USESCOPE}}</text>
				</view>
				<view class="">
					<text>· 有效期至 :</text>
					<text>{{pref.VALIDENDTIME}}</text>
				</view>
				<view class="">
					<text>· 详细说明 :</text>
					<text>{{pref.COMMENT}}</text>
				</view>
				<navigator url="/pages/index/index" open-type="switchTab" class="un-prefdetail2-b">
					<text>立即使用</text>
				</navigator>
			</view>
			<view v-if="this.pref.GETTIME2<86400000">
				<text class="iconfont icon-right-label un-pref-icon1"></text>
				<text class="un-pref-icon1-text">新到</text>
			</view>
			<view v-if="this.pref.VALIDENDTIME2<86400000 && this.pref.VALIDENDTIME2>0 && this.pref.GETTIME2>86400000">
				<text class="iconfont icon-right-label un-pref-icon2"></text>
				<text class="un-pref-icon2-text">即将过期</text>
			</view>
			<text class="iconfont icon-banyuan un-pref-icon4"></text>
			<text class="iconfont icon-banyuan1 un-pref-icon5"></text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pref:{id:2,type:5,USESCOPE:"移动端",TITLE:"全品类通用券",VALIDENDTIME:"",VALUES:'',USELIMITMONEY:'1',DISCOUNT:'8.8',VALIDTIME0:2,VALIDDAY:'6',STARTTIME:'2019-07-21',GETTIME:"2019-07-24"},
			}
		},
		onLoad() {
			if(this.pref.VALIDTIME0===2){
				this.pref.VALIDENDTIME1=new Date(new Date(this.pref.STARTTIME).getTime()+this.pref.VALIDDAY*24*60*60*1000-28800001);//失效时间毫秒值
				console.log("00000000000000000000000",this.pref.VALIDENDTIME1)
				this.pref.VALIDENDTIME=this.pref.VALIDENDTIME1.getFullYear()+'-'+(this.pref.VALIDENDTIME1.getMonth()+1)+'-'+this.pref.VALIDENDTIME1.getDate();//失效时间毫秒值转化为日期格式
			}
			this.pref.VALIDENDTIME2=new Date(this.pref.VALIDENDTIME).getTime()+24*60*60*1000-new Date().getTime();//距离失效日期剩余毫秒值
			this.pref.GETTIME2=new Date().getTime()-new Date(this.pref.GETTIME).getTime();//领取到现在的毫秒值
			uni.startPullDownRefresh();
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			
		},
		//点击导航栏 buttons 时触发
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: '/pages/pref/prefHelp/prefHelp'
			})
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #E02E24;
		padding: 0upx 30upx;
	}
	.un-prefdetail1{
		background-color: #F9F9F9;
		border-radius: 10upx;
		position: relative;
		margin-top: 40upx;
		text-align: center;
		padding: 50upx 0upx;
		border-bottom: #CCCCCC 1upx dashed;
		height: 276upx;
		.un-prefdetail1-text{
			font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
			font-weight: 700;
			color: #999999;
			font-size: 30upx;
			line-height:70upx;
		}
		.un-prefdetail1-text1{
			font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
			font-weight: 700;
			font-size: 70upx;
			line-height: 55upx;
			color: #666666;
		}
		.un-prefdetail1-text2{
			font-size: 25upx;
			color: #666666;
			line-height: 25upx;
		}
		.un-prefdetail1-text3{
			font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
			color: #666666;
		}
	}
	.un-prefdetail2{
		border-radius: 10upx;
		background-color: #FFFFFF;
		font-size: 25upx;
		color: #999999;
		padding: 60upx 40upx;
		font-weight: 500;
		line-height: 50upx;
		.un-prefdetail2-b{
			margin-top: 500upx;
			text-align: center;
			font-size: 32upx;
			color: #FFFFFF;
			background-color: #E02E24;
			border-radius: 50upx;
			width: 100%;
			height: 90upx;
			line-height: 90upx;
			font-weight: 500;
			
		}
	}
	.un-pref-icon1{
		position: absolute;
		z-index: 1;
		right: 30upx;
		top:-5upx;
		color: #F19736;
		font-size: 100upx;
	}
	.un-pref-icon1-text{
		position: absolute;
		z-index: 2;
		left: 660upx;
		top: 22upx;
		color: #FFFFFF;
		font-size: 25upx;
		transform: rotate(46deg);
	}
	.un-pref-icon2{
		position: absolute;
		z-index: 1;
		right: 30upx;
		top:-6upx;
		color: #F04844;
		font-size: 120upx;
	}
	.un-pref-icon2-text{
		position: absolute;
		z-index: 2;
		left: 630upx;
		top: 30upx;
		color: #FFFFFF;
		font-size: 25upx;
		transform: rotate(46deg);
	}
	.un-pref-icon4{
		position: absolute;
		z-index: 1;
		top:260upx;
		left: 21upx;
		color: #E02E24;
	}
	.un-pref-icon5{
		position: absolute;
		z-index: 1;
		top:260upx;
		left: 696upx;
		color: #E02E24;
	}
</style>
